<template>
  <el-dialog
    title="权限设置"
    width="50%"
    :visible.sync="visible"
    @close="$emit('update:showUserModal', false)"
    :show="showUserModal"
  >
    <div>
      <h4 class="permissions_title">用户配置</h4>
      <el-row>
        <el-col :span="24">
          渠道号:
        </el-col>
        <el-col :span="24">
          渠道名称:
        </el-col>
      </el-row>
    </div>
    <div>
      <h4 class="permissions_title">选择权限</h4>
      <el-transfer
        filterable
        :filter-method="filterMethod"
        filter-placeholder="请输入城市拼音"
        :titles="['未配置用户', '已配置用户']"
        v-model="value2"
        :data="data2">
      </el-transfer>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="close('updateUser')">取 消</el-button>
    <el-button type="primary" @click="sure('updateUser')">确 定</el-button>
  </span>
  </el-dialog>
</template>

<script>
  export default {
    name: 'SetUser',
    props: {
      showUserModal: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      showUserModal: function () {
        this.visible = this.showUserModal
      }
    },
    data: function() {
      const generateData2 = _ => {
        const data = [];
        const cities = ['张婷婷', '徐梦男', '马升', '王某', '李某', '张三', '李四'];
        const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];
        cities.forEach((city, index) => {
          data.push({
            label: city,
            key: index,
            pinyin: pinyin[index]
          });
        });
        return data;
      };
      return {
        visible: this.showpermiModal,
        data2: generateData2(),
        value2: [],
        filterMethod(query, item) {
          return item.pinyin.indexOf(query) > -1;
        }
      }
    },
    methods: {

    }
  }
</script>

<style scoped>
  .permissions_title{
    color:#409EFF;
    padding: 5px 0;
  }
</style>
